<script setup lang="ts">
import { ref } from "vue";
import tree from "./com/tree.vue";
import { flowbuildHook } from "./flowbuildhook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import workflow from "@/views/workflow/com.vue";

import Role from "@iconify-icons/ri/admin-line";
import Password from "@iconify-icons/ri/lock-password-line";
import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "User"
});

const formRef = ref();
const {
  form,
  loading,
  columns,
  dataList,
  treeData,
  pagetype,
  mode,
  pagination,
  buttonClass,
  onSearch,
  resetForm,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  detailform,
  rules,
  dialogFlowVisible,
  openflow,
  dialogEventVisible,
  openevent,
  eventrules,
  eventform
} = flowbuildHook();
</script>

<template>
  <div class="main">
    <tree class="tree" />
    <section class="rightpa" v-if="pagetype == 'list'">
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="bg-bg_color w-[99/100] pl-8 pt-4"
      >
        <el-form-item label="流程名称：" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名称"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="表单名称：" prop="mobile">
          <el-input
            v-model="form.mobile"
            placeholder="请输入手机号码"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            clearable
            class="!w-[160px]"
          >
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon(Search)"
            :loading="loading"
            @click="onSearch"
          >
            查询
          </el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <section class="tablepa">
        <el-card>
          <div>
            <el-button
              type=""
              :icon="useRenderIcon(AddFill)"
              @click="openevent('create')"
            >
              新增
            </el-button>
            <el-button
              type=""
              :icon="useRenderIcon(EditPen)"
              @click="openevent('edit')"
            >
              修改
            </el-button>
            <el-button
              type=""
              :icon="useRenderIcon(Delete)"
              @click="handleDelete('delete')"
            >
              删除
            </el-button>
          </div>
          <PureTableBar title="" @refresh="onSearch" :needtool="false">
            <!-- <template #buttons>
          <el-button type="primary" :icon="useRenderIcon(AddFill)">
            新增用户
          </el-button>
        </template> -->
            <!-- ref="tableRef"
              border
              align-whole="center"
              row-key="id"
              showOverflowTooltip
              table-layout="auto"
              default-expand-all  //树形表格用
              :loading="loading"
              :size="size"
              :data="treeData"
              :columns="columns"
              :checkList="checkList"//toolbar用
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"  //切换select
              @size-change="handleSizeChange"  //切换size
              @current-change="handleCurrentChange"  //切换页
            -->
            <template v-slot="{ size, checkList }">
              <pure-table
                ref="tableRef"
                border
                align-whole="center"
                showOverflowTooltip
                table-layout="auto"
                default-expand-all
                :loading="loading"
                :size="size"
                :data="treeData"
                :columns="columns"
                :checkList="checkList"
                :header-cell-style="{
                  background: 'var(--el-table-row-hover-bg-color)',
                  color: 'var(--el-text-color-primary)'
                }"
                @selection-change="handleSelectionChange"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
                <template #operation="{ row }">
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    @click="handleUpdate(row)"
                  >
                    修改
                  </el-button>
                  <el-popconfirm title="是否确认删除?">
                    <template #reference>
                      <el-button
                        class="reset-margin"
                        link
                        type="primary"
                        :size="size"
                        :icon="useRenderIcon(Delete)"
                        @click="handleDelete(row)"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    @click="handleUpdate(row)"
                  >
                    岗位
                  </el-button>
                </template>
              </pure-table>
            </template>
          </PureTableBar>
        </el-card>
      </section>
    </section>
    <section class="rightpa" v-if="pagetype == 'list'">
      <el-card>
        <div>
          <el-button type="" :icon="useRenderIcon(EditPen)" @click="openflow">
            流程设计
          </el-button>
          <el-button type="">
            <el-icon><UploadFilled /></el-icon>&emsp;保存
          </el-button>
          <el-button type=""
            ><el-icon><Select /></el-icon> &emsp;启用
          </el-button>
          <el-button type=""
            ><el-icon><CloseBold /></el-icon> &emsp;禁用
          </el-button>
        </div>
        <div class="detailform">
          <el-form
            :model="form"
            label-width="120px"
            width="600px"
            :rules="rules"
          >
            <el-form-item label="流程名称" prop="flowname">
              <el-input v-model="detailform.flowname" maxlength="50" />
            </el-form-item>
            <el-form-item label="表单名称" prop="tablename">
              <el-input v-model="detailform.tablename" disabled />
            </el-form-item>
            <el-form-item label="流程事件">
              <div class="tablerows tablehead">
                <div class="c1">事件名称</div>
                <div class="c2">操作</div>
                <div class="c3 blue">+</div>
              </div>
              <div
                class="tablerows"
                v-for="item in detailform.flowevent"
                :key="item.eventname"
              >
                <div class="c1">{{ item.eventname }}</div>
                <div class="c2 blue">删除</div>
                <div class="c3 blue" />
              </div>
            </el-form-item>
            <el-form-item label="流程管控范围">
              <el-checkbox
                v-model="detailform.flowrange"
                label="全公司"
                size="large"
              />
            </el-form-item>
            <el-form-item label="管控部门"> 选择 </el-form-item>
          </el-form>
        </div>
      </el-card>
    </section>
    <el-dialog
      v-model="dialogFlowVisible"
      title="流程设计"
      width="1300px"
      top="20px"
    >
      <section class="workflowbox"><workflow /></section>
    </el-dialog>
    <el-dialog
      v-model="dialogEventVisible"
      title="新增事件"
      width="500px"
      top="20px"
    >
      <el-form
        :model="eventform"
        label-width="120px"
        width="400px"
        :rules="eventrules"
      >
        <el-form-item label="事件名称：" prop="eventname">
          <el-input v-model="eventform.eventname" maxlength="50" />
        </el-form-item>
        <el-form-item label="应用创建人：" prop="formname"> 李四 </el-form-item>
        <el-form-item label="版本：" prop="version">
          <el-input v-model="eventform.version" maxlength="5" />
        </el-form-item>
        <el-form-item label="触发场景：" prop="formname">
          <el-select
            v-model="eventform.status"
            placeholder="请选择"
            clearable
            class="!w-[160px]"
          >
            <el-option label="正向" value="1" />
            <el-option label="逆向" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="接口号：" prop="port">
          <el-input v-model="eventform.port" maxlength="10" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
.main {
  width: 100%;
  display: flex;
}
.tree {
  width: 300px;
}
.rightpa {
  width: calc(100% - 350px);
  margin-left: 15px;
}
.tablepa {
  margin-top: 15px;
}
.detailform {
  margin-top: 25px;
  max-width: 500px;
}

.tablerows {
  background: #faf9f9;
  border-bottom: 1px solid #eee;
  width: 400px;
  height: 48px;
  line-height: 48px;
  display: flex;
  .c1 {
    width: 300px;
    padding-left: 16px;
  }
  .c2 {
    width: 70px;
  }
  .c3 {
    width: 30px;
    font-size: 20px;
  }
  .blue {
    color: #1677ff;
  }
}
.tablehead {
  background: #eff2fa;
}
.workflowbox {
  position: relative;
  min-height: 800px;
  width: 100%;
}
::v-deep .el-dialog__body {
  position: relative;
}
</style>
